<template>
  <div class="row-item top-small">
    <span>{{ props.label }}</span>
  </div>
  <div class="row-item no-top">
    <el-slider
      class="progress"
      v-model="process.value[key]"
      :min="rule.min"
      :max="rule.max"
      :step="rule.step"
      @change="change"
    />
    <el-input
      class="progress-input"
      v-model="process.value[key]"
      @blur="handle"
      @keyup.enter.prevent="handle"
    />
  </div>
</template>

<script setup lang="ts">
import { clamp } from 'lodash';

defineOptions({
  name: 'ProgressInput',
});

interface IProps {
  process: any;
  code: string;
  rule: any;
  label: string;
}

const props = withDefaults(defineProps<IProps>(), {
  process: {},
  code: '',
  rule: {},
  label: '',
});
const key = props.code;
const process = props.process;
const rule = props.rule;

const emits = defineEmits(['update:process', 'handler']);

const change = () => {
  emits('handler', process.key);
};
const handle = () => {
  let valid = true,
    value = process.value[key];
  if (value === '' || isNaN(value)) {
    valid = false;
    return;
  }
  if (typeof value === 'string') {
    value = +value;
  }
  value = clamp(value, rule.min, rule.max);
  process.value[key] = value;
  emits('handler', process.key);
};
</script>

<style lang="less" scoped>
.row-item {
  margin-top: 20px;
  display: flex;
  align-items: center;

  &.margin-top-small {
    margin-top: 10px;
  }

  &.no-top {
    margin-top: 0px;
  }

  .progress-input {
    width: 66px;
    margin-left: 7px;
  }
}
</style>
